<template>
	<div>
		<template v-for="menu in menuList">
			<el-submenu v-if="menu.children" :index="menu.id" :key="menu.id">
				<template slot="title">
					<i :class="menu.icon"></i>
					<span slot="title">{{ menu.name }}</span>
				</template>
				<menu-tree :menuList="menu.children"></menu-tree>
			</el-submenu>
			<el-menu-item v-else :index="menu.path" :key="menu.id" @click.native="addTabs">
				<i :class="menu.icon"></i>
				<span slot="title">{{ menu.name }}</span>
			</el-menu-item>
		</template>
	</div>
</template>

<script>
import { mapState } from "pinia" // 引入映射函数
import useStore from "@/store/index.js"

export default {
	name: "MenuTree",
	props: ["menuList"],
	inject: ["tabs"],
	data() {
		return {}
	},

	mounted() {},
	computed: {
		...mapState(useStore, ["router"]),
	},
	methods: {
		addTabs() {
			let addFlag = true
			for (const tab of this.tabs) {
				if (tab.path === this.$route.path) {
					addFlag = false
				}
			}

			if (this.tabs.length == 0 || addFlag) {
				this.$router.onReady(() => {
					this.router.forEach((r) => {
						if (r.path && r.path.substr(r.path.lastIndexOf("/")) === this.$route.path) {
							this.tabs.push({
								path: this.$route.path,
								title: r.name,
							})
							return
						}
					})
				})
			}
		},
	},
}
</script>

<style lang="scss" scoped></style>
